<template>
  <div class="table-box">
    <div :style="{ height: tableHeight + 'px', position: 'relative' }">
      <div class="table-headers" v-if="ids.length">
        <div class="t-l">
          <div class="radios">
            <el-checkbox
              v-model="checkAll"
              @click="changeVal"
              :indeterminate="isIndeterminate"
            ></el-checkbox>
          </div>
          <div class="ids-length">已经选中{{ ids.length }}项</div>
          <div
            class="w-18px h-18px ml-5px mt-2px flex items-center justify-center"
            style="background-color: #ebecf0; border-radius: 4px; cursor: pointer"
          >
            <el-icon size="14" color="#" @click="clearAll"><Close /></el-icon>
          </div>
        </div>
        <div class="t-r">
          <div class="tr-btn mr-8px" @click="handlePutPool" v-if="pageType == 'clue'">
            <Icon icon="fa-solid:grip-horizontal" class="mr-5px" />
            <span>放入线索池</span>
          </div>
          <div class="tr-btn mr-8px" @click="handleTransform" v-if="pageType == 'clue'">
            <el-icon class="mr-5px"><UserFilled /></el-icon>
            <span>转客户</span>
          </div>
          <div class="tr-btn mr-8px" @click="transfer" v-if="pageType == 'clue'">
            <el-icon class="mr-5px"><Sort /></el-icon>
            <span>转移/分配</span>
          </div>
          <div class="tr-btn mr-8px" @click="addTags" v-if="pageType == 'clue'">
            <el-icon class="mr-5px"><CirclePlusFilled /></el-icon>
            <span>添加标签</span>
          </div>
          <div class="tr-btn mr-8px" @click="addFollow" v-if="pageType == 'clue'">
            <el-icon class="mr-5px"><EditPen /></el-icon>
            <span>写跟进</span>
          </div>
          <div class="tr-btn mr-8px" @click="deleteClueBatch" v-if="pageType == 'clue'">
            <el-icon class="mr-5px"><Delete /></el-icon>
            <span>删除</span>
          </div>
          <div class="tr-btn mr-8px" @click="addCall" v-if="pageType == 'clue'">
            <el-icon class="mr-5px"><Phone /></el-icon>
            <span>添加到待拨打</span>
          </div>
          <div class="tr-btn mr-8px" @click="handleReceive" v-if="pageType == 'cluePool'">
            <el-icon class="mr-5px"><UserFilled /></el-icon>
            <span>领取</span>
          </div>
          <div class="tr-btn mr-8px" @click="allocation" v-if="pageType == 'cluePool'">
            <el-icon class="mr-5px"><Pointer /></el-icon>
            <span>分配</span>
          </div>
          <div class="tr-btn mr-8px" @click="deleteCluePoolBatch" v-if="pageType == 'cluePool'">
            <el-icon class="mr-5px"><Delete /></el-icon>
            <span>删除</span>
          </div>
          <!-- 客户 -->
          <div class="tr-btn mr-8px" @click="handlePutPoolCustomer" v-if="pageType == 'customer'">
            <Icon icon="fa-solid:grip-horizontal" class="mr-5px" />
            <span>放入公海</span>
          </div>
          <div class="tr-btn mr-8px" @click="transferCustomer" v-if="pageType == 'customer'">
            <el-icon class="mr-5px"><Sort /></el-icon>
            <span>转移/分配</span>
          </div>
          <div class="tr-btn mr-8px" @click="addTagsCustomer" v-if="pageType == 'customer'">
            <el-icon class="mr-5px"><CirclePlusFilled /></el-icon>
            <span>添加标签</span>
          </div>
          <div class="tr-btn mr-8px" @click="addFollowCustomer" v-if="pageType == 'customer'">
            <el-icon class="mr-5px"><EditPen /></el-icon>
            <span>写跟进</span>
          </div>
          <div class="tr-btn mr-8px" @click="lockCustomer" v-if="pageType == 'customer'">
            <Icon icon="ep:lock" class="mr-5px" />
            <span>锁定</span>
          </div>
          <div class="tr-btn mr-8px" @click="unlockCustomer" v-if="pageType == 'customer'">
            <Icon icon="ep:unlock" class="mr-5px" />
            <span>解锁</span>
          </div>
          <div class="tr-btn mr-8px" @click="batchDeleteCustomers" v-if="pageType == 'customer'">
            <Icon icon="ep:delete" class="mr-5px" />
            <span>删除</span>
          </div>
          <div class="tr-btn mr-8px" @click="addCallCustomer" v-if="pageType == 'customer'">
            <el-icon class="mr-5px"><Phone /></el-icon>
            <span>添加到待拨打</span>
          </div>

          <div
            class="tr-btn mr-8px"
            @click="handleReceiveCustomer"
            v-if="pageType == 'customerPool'"
          >
            <el-icon class="mr-5px"><UserFilled /></el-icon>
            <span>领取</span>
          </div>
          <div class="tr-btn mr-8px" @click="allocationCustomer" v-if="pageType == 'customerPool'">
            <el-icon class="mr-5px"><Pointer /></el-icon>
            <span>分配</span>
          </div>
          <div
            class="tr-btn mr-8px"
            @click="deleteCustomerPoolBatch"
            v-if="pageType == 'customerPool'"
          >
            <el-icon class="mr-5px"><Delete /></el-icon>
            <span>删除</span>
          </div>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :stripe="true"
        :show-overflow-tooltip="true"
        @selection-change="handleSelectionChange"
        @select-all="selectAll"
        @select="selectData"
        :header-cell-style="getRowClass"
        @sort-change="sortChangeTable"
        ref="sortTable"
        @row-click="rowClick"
        border
        :data="list"
        height="100%"
        :header-row-style="{ height: '48px', color: '#6b778c' }"
        style="width: 100%; cursor: pointer"
      >
        <el-table-column type="selection" width="55" />
        <template v-for="column in meterHeaderList" :key="column.sort">
          <el-table-column
            show-overflow-tooltip
            :sortable="column.custom"
            :width="column.width"
            v-if="column.show"
            :prop="column.prop"
            :label="column.label"
            :fixed="column.fixed"
          >
            <template #header v-if="column.prop == 'mobile'">
              <el-button size="small" disabled style="padding: 0 2px">
                <Icon icon="ep:phone" />
              </el-button>
            </template>
            <template #header v-else-if="column.prop == 'lockStatus'">
              <el-button
                size="small"
                disabled
                style="padding: 0 2px"
                v-if="column.prop == 'lockStatus'"
              >
                <Icon icon="ep:unlock" />
              </el-button>
            </template>
            <template #default="scope">
              <div v-if="column.prop == 'mobile'">
                <el-dropdown
                  v-if="scope.row.mobile && scope.row.telephone"
                  trigger="hover"
                  placement="bottom"
                  size="small"
                  style="position: absolute; right: 0; top: 0"
                >
                  <div class="w-50px h-42px" style="cursor: pointer">
                    <Icon style="margin: 10px 12px" icon="ep:phone" />
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        style="padding: 8px 15px"
                        @click="onCall(scope.row, scope.row.mobile)"
                      >
                        <Icon icon="ep:phone" /> 手机号
                      </el-dropdown-item>
                      <el-dropdown-item
                        style="padding: 8px 15px"
                        @click="onCall(scope.row, scope.row.telephone)"
                      >
                        <Icon icon="ep:phone" />
                        电话
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-link :underline="false" v-else-if="scope.row.mobile"
                  ><Icon @click="onCall(scope.row, scope.row.mobile)" icon="ep:phone"
                /></el-link>
                <el-link :underline="false" v-else-if="scope.row.telephone"
                  ><Icon @click="onCall(scope.row, scope.row.telephone)" icon="ep:phone"
                /></el-link>
              </div>
              <div v-if="column.prop == 'lockStatus'">
                <el-tooltip
                  class="box-item"
                  effect="light"
                  content="锁定客户"
                  placement="right"
                  v-if="!scope.row.lockStatus"
                >
                  <svg
                    t="1733739895776"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="122613"
                    data-spm-anchor-id="a313x.search_index.0.i47.140a3a81ht4rpJ"
                    width="20"
                    height="20"
                    @click="handleUnlock(scope.row.id)"
                  >
                    <path
                      d="M512 547.1c-45.2 0-81.9 36.2-81.9 80.9 0 32.2 19.2 60.1 46.8 73v32c0 20.1 15.8 36.4 35.1 36.4 19.4 0 35.1-16.3 35.1-36.4v-32c27.7-13 46.8-40.8 46.8-73 0-44.7-36.7-80.9-81.9-80.9z"
                      fill="#dbdbdb"
                      p-id="122614"
                      data-spm-anchor-id="a313x.search_index.0.i45.140a3a81ht4rpJ"
                      class="selected"
                    ></path>
                    <path
                      d="M880 64.2H144.7c-44.2 0-80 35.8-80 80v735.3c0 44.2 35.8 80 80 80H880c44.2 0 80-35.8 80-80V144.2c0-44.2-35.8-80-80-80z m-87.2 728.6c0 38.8-31.4 70.2-70.2 70.2H301.4c-38.7 0-70.2-31.4-70.2-70.2V512c0-38.8 31.4-70.2 70.2-70.2h23.4v-117c0-90.5 83.8-163.8 187.2-163.8 103.4 0 187.2 73.3 187.2 163.8v35.1h-0.5c-2.9 19.8-19.9 35.1-40.5 35.1s-37.7-15.2-40.5-35.1h-0.4v-5.3-0.5-29.3c0-38.8-47.2-81.9-105.3-81.9-58.1 0-105.3 43.1-105.3 81.9v117h315.9c38.8 0 70.2 31.4 70.2 70.2v280.8z"
                      fill="#dbdbdb"
                      p-id="122615"
                      data-spm-anchor-id="a313x.search_index.0.i44.140a3a81ht4rpJ"
                      class=""
                    ></path>
                  </svg>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="light"
                  content="解锁客户"
                  placement="right"
                  v-else
                >
                  <svg
                    t="1733792948402"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="158843"
                    width="18"
                    height="18"
                    @click="handleLock(scope.row.id)"
                  >
                    <path
                      d="M887.466667 1024H136.533333a136.533333 136.533333 0 0 1-136.533333-136.533333V136.533333a136.533333 136.533333 0 0 1 136.533333-136.533333h750.933334a136.533333 136.533333 0 0 1 136.533333 136.533333v750.933334a136.533333 136.533333 0 0 1-136.533333 136.533333zM508.3136 136.533333A241.937067 241.937067 0 0 0 275.797333 369.732267h61.44a171.349333 171.349333 0 1 1 342.698667 0h61.44A240.2304 240.2304 0 0 0 508.3136 136.533333zM819.2 469.333333a60.347733 60.347733 0 0 0-61.44-60.757333H266.24a60.347733 60.347733 0 0 0-61.44 60.757333v289.109334a60.347733 60.347733 0 0 0 61.44 60.757333h491.52a60.347733 60.347733 0 0 0 61.44-60.757333V469.333333z m-305.9712 272.110934H505.856a46.2848 46.2848 0 0 1-46.4896-46.148267V571.392a46.2848 46.2848 0 0 1 46.4896-46.148267h7.3728a46.2848 46.2848 0 0 1 46.557867 46.148267v123.904a46.2848 46.2848 0 0 1-46.557867 46.148267z"
                      fill="#d81e06"
                      p-id="158844"
                    ></path>
                  </svg>
                </el-tooltip>
              </div>
              <div v-if="column.prop == 'moduleId'">
                <el-tag type="primary" v-if="getModuleName(scope.row.moduleId)">{{
                  getModuleName(scope.row.moduleId).name
                }}</el-tag>
              </div>
              <div v-if="column.prop == 'name'" class="flex items-center">
                <el-popover placement="top-start" trigger="hover">
                  <template #reference>
                    <el-image
                      v-if="scope.row.aiSummary == '高'"
                      @click="callLog(scope.row.lastAiSummaryLogId)"
                      :src="ImgLevelHigh"
                      class="w-16px h-16px mr-4px"
                    />
                    <el-image
                      v-else-if="scope.row.aiSummary == '中'"
                      @click="callLog(scope.row.lastAiSummaryLogId)"
                      :src="ImgLevelMid"
                      class="w-16px h-16px mr-4px"
                    />
                  </template>
                  <el-link>AI评级:{{ scope.row.aiSummary }}意向</el-link>
                </el-popover>
                <el-link type="primary" class="!color-#0052cc">
                  {{ scope.row.name }}
                </el-link>
              </div>
              <div v-if="column.prop == 'source' && scope.row.source">
                <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
              </div>
              <div v-if="column.prop == 'ownerTime'">
                {{ formatDate(scope.row.ownerTime) }}
              </div>
              <div v-if="column.prop == 'encryptMobile'">
                <div v-if="scope.row.mobile" class="flex items-center !color-#42526e">
                  {{ scope.row.encryptMobile }}
                </div>
              </div>
              <div v-if="column.prop == 'followUpStage'" class="flex items-center w-150px">
                <div class="flex items-center justify-between">
                  <el-tag type="primary" class="mr-5px" v-if="scope.row.followUpStage">
                    {{ scope.row.followUpStage }}
                  </el-tag>
                  <el-dropdown trigger="click" size="small" v-if="pageType == 'clue'">
                    <Icon
                      class="cursor-pointer"
                      icon="ep:edit"
                      @click="onEditClueStage(scope.row)"
                    />
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          @click="selectStage(scope.row, it.id)"
                          v-for="it in stageList"
                          :key="it.id"
                          class="!p-0"
                          style="text-align: center"
                        >
                          <div
                            :class="{ active: sceneSelectId == it.id }"
                            class="w-100% pt-8px pb-8px"
                          >
                            {{ it.name }}
                          </div>
                        </el-dropdown-item>
                        <el-dropdown-item style="padding: 8px 15px" @click="wentPage">
                          <i class="wk wk-manage"></i> 设置跟进阶段
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
              <div v-if="column.prop == 'labelList'" class="label-list">
                <el-check-tag
                  v-if="scope.row.labelList.length > 0"
                  :key="scope.row.labelList[0].id"
                  checked
                  :style="{
                    background: scope.row.labelList[0].bgColor,
                    color: scope.row.labelList[0].textColor,
                    marginRight: '4px',
                    marginBottom: 0
                  }"
                  class="mb-4px inline-block"
                  >{{ scope.row.labelList[0].name }}</el-check-tag
                >
                <el-dropdown
                  v-if="scope.row.labelList.length > 1"
                  trigger="hover"
                  placement="top"
                  size="small"
                >
                  <div
                    style="cursor: pointer; background-color: #ebecf0; border-radius: 4px"
                    class="ml-5px w-32px h-20px flex items-center justify-center"
                  >
                    <el-icon><MoreFilled /></el-icon>
                  </div>
                  <template #dropdown>
                    <div class="p-10px">
                      <el-check-tag
                        v-for="tag in scope.row.labelList.slice(1)"
                        :key="tag.id"
                        :style="{
                          background: tag.bgColor,
                          color: tag.textColor,
                          marginRight: '4px'
                        }"
                        class="mb-4px inline-block"
                        checked
                      >
                        {{ tag.name }}
                      </el-check-tag>
                    </div>
                  </template>
                </el-dropdown>
              </div>
              <div v-if="column.prop == 'encryptTelephone'">
                <div v-if="scope.row.telephone" class="flex items-center !color-#42526e">
                  {{ scope.row.encryptTelephone }}
                </div>
              </div>
              <div v-if="column.prop == 'industryId'">
                <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
              </div>
              <div v-if="column.prop == 'dataType'">
                <dict-tag :type="DICT_TYPE.CRM_DATA_TYPE" :value="scope.row.dataType" />
              </div>
              <div v-if="column.prop == 'levelRespVO'">
                <el-tag
                  v-if="scope.row.levelRespVO"
                  :disable-transitions="false"
                  :style="{
                    background: scope.row.levelRespVO.bgColor,
                    color: scope.row.levelRespVO.textColor,
                    marginRight: '10px',
                    border: 'none',
                    cursor: 'pointer',
                    paddingRight: '9px'
                  }"
                >
                  {{ scope.row.levelRespVO.name }}
                </el-tag>
              </div>
              <div v-if="column.prop == 'lastCallTime'">
                {{ formatDate(scope.row.lastCallTime) }}
              </div>
              <div v-if="column.prop == 'lastAcceptTime'">
                {{ formatDate(scope.row.lastAcceptTime) }}
              </div>
              <div v-if="column.prop == 'contactNextTime'">
                {{ formatDate(scope.row.contactNextTime) }}
              </div>
              <div v-if="column.prop == 'contactLastTime'">
                {{ formatDate(scope.row.contactLastTime) }}
              </div>
              <div v-if="column.prop == 'updateTime'">
                {{ formatDate(scope.row.updateTime) }}
              </div>
              <div v-if="column.prop == 'createTime'">
                <span>
                  {{ formatDate(scope.row.createTime) }}
                </span>
              </div>
              <div v-if="setTimes[column.prop]">
                <span>
                  {{
                    scope.row[setTimes[column.prop]]
                      ? formatDate(Number(scope.row[setTimes[column.prop]]))
                      : ''
                  }}
                </span>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <el-dropdown
        trigger="hover"
        placement="bottom"
        size="small"
        style="position: absolute; right: 0; top: 0"
      >
        <div class="header-sort">
          <el-icon><Operation /></el-icon>
        </div>
        <template #dropdown>
          <TableHeadSort style="right: 100px" :listData="meterHeaderList">
            <div class="mr-20px mt-0 flex justify-end">
              <el-button @click="handleDefaultValue" size="small">恢复默认</el-button>
              <el-button @click="saveTableSortValue" type="primary" size="small"
                >保存配置</el-button
              >
            </div>
          </TableHeadSort>
        </template>
      </el-dropdown>
    </div>
    <div class="page-box">
      <Pagination
        style="margin: 0 !important"
        :total="total"
        :page="pageNo"
        :limit="pageSize"
        @pagination="pageGet"
      />
    </div>
  </div>
  <FollowUpRecordForm ref="followFormRef" @success="getPage" />
  <CrmTransferForm ref="transferFormRef" @success="getPage" />
  <CrmTag ref="crmTagRef" @success="getPage" :pageType="pageType" />
  <!-- 详情弹窗 -->
  <CrmSpec ref="crmSpec" @getPage="getPage"> </CrmSpec>
</template>
<script setup>
import * as CluePoolApi from '@/api/crm/cluePool'
import { TableHeadSort } from '@/components/TableHeadSort/index'
import { BizTypeEnum } from '@/api/crm/permission'
import FollowUpRecordForm from '@/views/crm/followup/FollowUpRecordForm.vue'
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
import CrmTag from '../CrmTag/index.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as CustomerApi from '@/api/crm/customer'
import { usePhoneStore } from '@/store/modules/phone'
import { useSoftPhoneStore } from '@/store/modules/softPhone'
import { emitter } from '@/utils/eventBus.ts'

import {
  Operation,
  Close,
  MoreFilled,
  UserFilled,
  Sort,
  CirclePlusFilled,
  EditPen,
  Delete,
  Phone,
  Pointer
} from '@element-plus/icons-vue'
import { getFollowStageConfigList } from '@/api/crm/module/index'
import * as ClueApi from '@/api/crm/clue'
import * as seatApi from '@/api/call/seating/index'

const useSoftPhone = useSoftPhoneStore()
const useStore = usePhoneStore()
const message = useMessage()
const { t } = useI18n()
const emit = defineEmits([
  'pageNextProver',
  'ordinaryOrAdvancedRequest',
  'handleDefault',
  'saveTableSort',
  'handleDistributeForm',
  'sortChange',
  'setLoading'
])
const props = defineProps({
  pageType: String,
  list: [],
  loading: Boolean,
  meterHeaderList: Array,
  total: Number,
  pageNo: Number,
  pageSize: Number,
  domHeight: Number,
  setTimes: Object,
  moduleOption: Array
})
const tableHeight = ref(0)
const isIndeterminate = ref(false)
const checkAll = ref(false)
// 设置表格的
const setTableHeight = (val) => {
  tableHeight.value = val
}
defineExpose({ setTableHeight })
watch(
  () => props.domHeight,
  (value) => {
    tableHeight.value = value
  },
  { deep: true, immediate: true }
)
const closeTag = ref()
/**多选合集*/
const ids = ref([])
// 全部选择了
const selectAll = (val) => {
  checkAll.value = val.length == 0 ? false : true
}
const sortTable = ref(null)
const changeVal = (val) => {
  sortTable.value.toggleAllSelection()
}
/**清除所有选中项*/
const clearAll = () => {
  sortTable.value.clearSelection()
}
/***/
const selectData = (val) => {
  if (val.length == props.list.length) {
    checkAll.value = true
    isIndeterminate.value = false
  } else {
    if (val.length) {
      isIndeterminate.value = true
    } else {
      isIndeterminate.value = false
    }
  }
}
/**call*/
const onCall = async (row, callee) => {
  emitter.emit('simCall', {
    callee,
    source: props.pageType,
    sourceId: row.id
  })
  emitter.emit('userCallCallee', callee)
}
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  ids.value = val.map((item) => {
    return item.id
  })
}
/** 处理样式 */
const getRowClass = ({ row, column, rowIndex, columnIndex }) => {
  if (column.property == closeTag.value) {
    column.order = ''
  }
}
/** 标签排序 */
const sortChangeTable = (column) => {
  if (column.prop == 'levelRespVO') {
    emit(
      'sortChange',
      'levelValue',
      column.order ? (column.order == 'descending' ? 'desc' : 'asc') : ''
    )
  } else {
    emit(
      'sortChange',
      column.prop,
      column.order ? (column.order == 'descending' ? 'desc' : 'asc') : ''
    )
  }
}
/*列表的数据刷新*/
const getPage = () => {
  emit('ordinaryOrAdvancedRequest')
}
const stageList = ref([])
/**修改当前跟进阶段*/
const onEditClueStage = async (item) => {
  stageList.value = await getFollowStageConfigList({ moduleId: item.moduleId })
}
/**修改当前数据的跟进阶段*/
const selectStage = async (row, stageId) => {
  await ClueApi.updateClueStage({
    id: row.id,
    stageId
  })
  ElMessage.success('修改成功')
  getPage()
}
const { push } = useRouter()
/*去配置*/
const wentPage = () => {
  push('/crm/module?stage=9')
}
/**分页*/
const pageGet = (val) => {
  emit('pageNextProver', val)
}
/*线索批量添加待拨打*/
const addCall = async () => {
  try {
    emit('setLoading', true)
    const arr = []
    multipleSelection.value.map((item) => {
      if (item.mobile || item.telephone) {
        arr.push({
          name: item.name,
          number: item.mobile || item.telephone,
          source: 'clue',
          sourceId: item.id
        })
      }
    })
    const data = await seatApi.batchCreateList({ list: arr })
    ElMessage.success('操作成功')
    emitter.emit('add_pending')
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/**客户批量添加带拨打*/
const addCallCustomer = async () => {
  try {
    emit('setLoading', true)
    const arr = []
    multipleSelection.value.map((item) => {
      if (item.mobile || item.telephone) {
        arr.push({
          name: item.name,
          number: item.mobile || item.telephone,
          source: 'customer',
          sourceId: item.id
        })
      }
    })
    const data = await seatApi.batchCreateList({ list: arr })
    ElMessage.success('操作成功')
    emitter.emit('add_pending')
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/**批量领取线索*/
const handleReceive = async () => {
  try {
    emit('setLoading', true)
    const name = multipleSelection.value.map((item) => {
      return item.name
    })
    await message.confirm(`确定领取线索【${name.join(',')}】 吗？`)
    await CluePoolApi.receiveClue(ids.value)
    message.success(`领取线索【${name.join(',')}】成功`)
    getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/** 批量 领取客户 */
const handleReceiveCustomer = async () => {
  try {
    emit('setLoading', true)
    const name = multipleSelection.value.map((item) => {
      return item.name
    })
    await message.confirm(`确定领取客户【${name.join(',')}】 吗？`)
    await CustomerApi.receiveCustomer(ids.value)
    message.success(`领取客户【${name.join(',')}】成功`)
    getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/**线索选中数据分配*/
const allocation = () => {
  emit('handleDistributeForm', ids.value)
}
/**客户选中数据分配*/
const allocationCustomer = () => {
  emit('handleDistributeForm', ids.value)
}
/**批量删除线索*/
const deleteClueBatch = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    emit('setLoading', true)
    // 发起删除
    await ClueApi.deleteClues(ids.value)
    message.success(t('common.delSuccess'))
    // 刷新列表
    getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/**批量删除客户公海*/
const deleteCustomerPoolBatch = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    emit('setLoading', true)
    // 发起删除
    await CustomerApi.deleteCustomerPools(ids.value)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/** 解锁客户 */
const handleLock = async (id) => {
  try {
    emit('setLoading', true)
    await CustomerApi.lockCustomer(unref(id), false)
    ElMessage.success('解锁客户成功')
    getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}

/** 锁定客户 */
const handleUnlock = async (id) => {
  try {
    emit('setLoading', true)
    await CustomerApi.lockCustomer(unref(id), true)
    ElMessage.success('锁定客户成功')
    getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/**批量删除线索公海的数据*/
const deleteCluePoolBatch = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    emit('setLoading', true)
    // 发起删除
    await CluePoolApi.deleteCluePools(ids.value)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
const followFormRef = ref(null)
/*线索批量添加跟进*/
const addFollow = () => {
  followFormRef.value?.open(BizTypeEnum.CRM_CLUE, ids.value, null, true)
}
/**客户批量添加跟进*/
const addFollowCustomer = () => {
  followFormRef.value?.open(BizTypeEnum.CRM_CUSTOMER, ids.value, null, true)
}
/**批量锁定*/
const lockCustomer = async () => {
  try {
    emit('setLoading', true)

    let obj = {
      idList: ids.value,
      lockStatus: true
    }
    const data = await CustomerApi.batchlock(obj)
    ElMessage.success('操作成功!')
    getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/*批量解锁**/
const unlockCustomer = async () => {
  try {
    emit('setLoading', true)
    let obj = {
      idList: ids.value,
      lockStatus: false
    }
    const data = await CustomerApi.batchlock(obj)
    ElMessage.success('操作成功!')
    getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/**客户批量删除*/
const batchDeleteCustomers = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    emit('setLoading', true)
    // 发起删除
    await CustomerApi.deleteCustomers(ids.value)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/** 批量线索转移 */
const transferFormRef = ref()
const transfer = () => {
  transferFormRef.value?.open(true, '线索转移/分配', ids.value, ClueApi.batchTransferClue)
}
/**批量转移分配*/
const transferCustomer = () => {
  transferFormRef.value?.open(true, '客户转移/分配', ids.value, CustomerApi.batchTransferCustomer)
}
/** 批量转化为客户 */
const handleTransform = async () => {
  const name = multipleSelection.value.map((item) => {
    return item.name
  })
  try {
    emit('setLoading', true)
    await message.confirm(`确定将【${name.join(',')}】转化为客户吗？`)
    await ClueApi.batchTransformClue(ids.value)
    message.success(`转化客户【${name.join(',')}】成功`)
    getPage()
    emit('setLoading', false)
  } catch {
    emit('setLoading', false)
  }
}
/** 批量线索放入公海 */
const handlePutPool = () => {
  const name = multipleSelection.value.map((item) => {
    return item.name
  })
  ElMessageBox.confirm(`确定要将【${name.join(',')}】放入公海吗？`, '提示', {
    confirmButtonText: '确 认',
    cancelButtonText: '取 消'
  }).then(async () => {
    try {
      emit('setLoading', true)
      await ClueApi.batchPutCluePool(ids.value)
      message.success(`【${name.join(',')}】放入公海成功`)
      getPage()
      emit('setLoading', false)
    } catch {
      emit('setLoading', false)
    }
  })
}
/**批量客户放入公海*/
const handlePutPoolCustomer = () => {
  const name = multipleSelection.value.map((item) => {
    return item.name
  })
  ElMessageBox.confirm(`确定要将【${name.join(',')}】放入公海吗？`, '提示', {
    confirmButtonText: '确 认',
    cancelButtonText: '取 消'
  }).then(async () => {
    await CustomerApi.batchPutCustomerPool(ids.value)
    message.success(`【${name.join(',')}】放入公海成功`)
    getPage()
  })
}
const crmTagRef = ref(null)
/**线索批量添加标签*/
const addTags = () => {
  crmTagRef.value.open(ids.value)
}
/**客户批量添加标签*/
const addTagsCustomer = () => {
  crmTagRef.value.open(ids.value)
}
/** 恢复默认 */
const handleDefaultValue = () => {
  emit('handleDefault')
  message.success('保存成功')
}
const saveTableSortValue = () => {
  emit('saveTableSort')
  message.success('保存成功')
}
const crmSpec = ref(null)
/**选中一行*/
const rowClick = (row, column) => {
  if (column.property == undefined) return
  if (props.pageType == 'clue' || props.pageType == 'cluePool') {
    if (column.property != 'mobile' && column.property != 'followUpStage') {
      const nowIds = props.list.map((item) => item.id)
      crmSpec.value.setDrawer(true, 'clue', row.id, nowIds)
    }
  } else {
    if (
      column.property != 'mobile' &&
      column.property != 'followUpStage' &&
      column.property != 'lockStatus'
    ) {
      const nowIds = props.list.map((item) => item.id)
      crmSpec.value.setDrawer(true, 'customer', row.id, nowIds)
    }
  }
}
const getModuleName = (id) => {
  return props.moduleOption.find((item) => item.id == id)
}
</script>
<style scoped lang="scss">
.table-box {
  background-color: #fff;
  box-shadow: 0 2px 8px #172b4d1a;
  position: relative;
  padding-bottom: 64px;
  .page-box {
    width: calc(100% - 32px);
    padding: 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 32px;
    text-align: right;
  }
}
.header-sort {
  width: 34px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: #ebecf0;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 9;
  cursor: pointer;
}
.table-headers {
  width: 100%;
  height: 48px;
  background-color: #42526e;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  .t-l {
    width: 180px;
    display: flex;
    align-items: center;
    .radios {
      width: 43px;
      text-align: center;
      line-height: 48px;
      padding: 0 12px 0 0;
    }
    .ids-length {
      color: #fff;
      font-size: 14px;
    }
  }
  .t-r {
    width: calc(100% - 180px);
    height: 100%;
    overflow-x: auto;
    display: flex;
    align-items: center;
    .tr-btn {
      font-size: 14px;
      color: #fff;
      display: flex;
      align-items: center;
      padding: 8px 15px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .tr-btn:hover {
      background: #fff;
      color: #626976;
      border-radius: 4px;
      flex-shrink: 0;
    }
  }
  .t-r::-webkit-scrollbar {
    height: 8px;
  }

  .t-r::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .t-r::-webkit-scrollbar-thumb {
    background: #c1c7d0;
    border-radius: 4px;
  }

  .t-r::-webkit-scrollbar-thumb:hover {
    background: #c1c7d0;
  }
}
.label-list {
  display: flex;
  align-items: center;
}
</style>
